<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>联系我们</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        ul li {
            list-style: none;
        }

        #contact{
            width: 100%;
            min-width: 1200px;

        }

        #head {
            width: 80%;
            height: 80px;
            background-color: white;
            margin: 0 auto;
            /* background-color: yellow; */
        }

        #logo {
            /* background-color: red; */
            width: 30%;
            height: 80px;
            float: left;
            position: relative;
            left: 10px;
        }

        #headleft {
            width: 50%;
            float: left;
            height: 80px;
            /* background-color: yellow; */
        }

        #headleft1 {
            height: 80px;
            line-height: 80px;
        }

        #textword {
            width: 250px;
            height: 30px;
        }

        #textsearch {
            width: 50px;
            height: 35px;
            border: 1px solid #ccc;
            background: url(images/serach.jpg);
        }

        /*背景图  */
        #login {
            text-decoration: none;
            color: #407434;
        }

        #login img {
            width: 20px;
            height: 80px;
        }

        #headright {
            height: 80px;
            line-height: 80px;
            text-align: center;
        }
        /* 注销按钮 */
        #loginName,#unregister{
           display: none;
        }
        #unregister{
            height: 25px;
            width:50px;
            border: none;
            outline: none;
            border-radius: 5px;
            background: linear-gradient(rgb(160, 191, 124), rgb(101, 147, 74));
            box-shadow: 0 0 3px rgb(64, 116, 52);
            cursor: pointer;
            color: white;
        }
        #bodynav {
            width: 100%;
            height: 60px;
            background-color: rgb(160, 190, 117);
            /* background-color: red; */
        }

        #nav {
            width: 80%;
            height: 60px;
            margin: 0 auto;
            background-color: rgb(160, 190, 117);
            /* background-color:pink; */
        }
        #nav li {
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 20px;
            width: 20%;
            float: left;
        }

        #nav a {
            color: grey;
            font-weight: bold;
        }

        #nav a:hover {
            color: #407434;
            font-weight: bold;
        }
        /* 套餐下拉框 */
       #choose {
            width: 500px;
            display: none;
        }

        #pep {
            list-style: none;
            margin-left:80px;
        }

        #pep dd {
            width: 100px;
            height: 50px;
            line-height: 50px;
            background-color: rgba(230, 230, 230, 0.6);
            font-size: 14px; 
            position: relative;
        }

        #pep dd a {
            color: grey;
        }
        /* 健康饮食下拉框 */
        #updown{
            width: 500px;
            display: none;
        }
        #up{
            list-style: none;
            margin-left: 80px;
        }
        #up dd{
            width:100px;
            height: 50px;
            line-height: 50px;
            background-color:  rgba(230, 230, 230, 0.6);
            font-size: 14px;
            position: relative;
        }
        #up dd a{
            color:grey;
        }
         /* 图片轮播 */
         #picture {
            width: 100%;
            height: 400px;
            margin: 0 auto;
            overflow: hidden;
            /* border: 1px solid red; */
        }

        #picture img {
            width: 100%;
            height: 400px;
        }

        /* 联系我们 */
        #contactus{
            width: 80%;
            height: 500px;
            margin: 0 auto;
        }
        #contactusword{
            width: 100%;
            height: 150px;
            text-align: center;
        }
        #contactusword h2{
            padding:40px;
            color:rgb(64, 116, 52)
        }
        #contactusword h3{
            color:grey;
        }
        #contactusword #d1{
            height: 50px;
            line-height: 50px;
            color:grey;
        }
        #contactusword #d2{
            color:black;
            height: 30px;
            line-height: 30px;
        }
        #contacttext{
            width: 100%;
            height: 200px;
            display: flex;
        }
        #contacttextone,#contacttexttwo,#contacttextthree{
            flex:1;
            text-align: center;
            margin-top:20px;
            color:grey;
        }
        /* 底部 */
        #bottom {
            width: 100%;
            height: 150px;
            background-color:rgba(30,30,30,0.4);
        }
        #bottomtext {
            width: 80%;
            height: 150px;
            margin: 0 auto;
        }
        #bottomleft {
            float: left;
            width: 200px;
            height: 150px;
            position: relative;
            top: 10px;

        }
        #bottomrighttext a,#bottomleft span,#bottomrighttext span,#bottomrighttext a{
            color: grey;
        }
        #bottomleft img {
            width: 200px;
            height: 80px;
        }
        #bottomright {
            width: 100%-200px;
            height: 150px;

        }
        #bottomrighttext {
            padding: 30px;
            position: relative;
            top: 40px;
            left: 30px;
        }
        #bottomrighttext a {
            text-decoration: none;
            margin-left: 15px;
        }
    </style>
    <script>
    window.onload = function () {
            // 图片轮播
            var pic = ['indexpic1.jpg', 'indexpic2.jpg', 'indexpic3.jpg', 'indexpic4.jpg']
            var inner = document.getElementById("inner").getElementsByTagName("img")[0]
            var i = 0;
            window.setInterval(function () {
                inner.src = "images/" + pic[i];
                i++;
                if (i == 3) i = 0;
            }, 3000)
            //登录后显示当前用户
            if(localStorage.getItem('loginName')){
                var links=document.querySelectorAll('#headright a')
                for(var i=0;i<links.length;i++){
                    links[i].style.display='none';
                }
                document.querySelector("#loginName").style.display='inline-block';
                document.querySelector("#unregister").style.display='inline-block';
                document.querySelector('#headright span').style.display="none";
                document.querySelector('#loginName').innerHTML="当前账号："+'<a href="cebiandaohanglan.html">'+localStorage.getItem('loginName')+'</a>'
            }

        }
        //套餐下拉框
            $(function () {
            $('#secondnav').mouseover(function () {
                $('#choose').css('display', 'block')
            })
            $('#secondnav').mouseout(function () {
                $('#choose').css('display', 'none')
            })
        })

        //健康饮食下拉框
        $(function () {
            $('#down').mouseover(function () {
                $('#updown').css('display', 'block')
            })
            $('#down').mouseout(function () {
                $('#updown').css('display', 'none')
            })
        })


        //注销事件
        function unregister(){
            localStorage.removeItem('loginName');
            location.replace('shouye.html')
        }
        //导航栏固定
        window.onscroll=function(){
            if(document.documentElement.scrollTop>=80){
                document.getElementById('bodynav').style.position='fixed';
                document.getElementById('bodynav').style.top=0;
                document.getElementById('bodynav').style.left=0;
            }
            else{
                document.getElementById('bodynav').style.position='static';
            }
        }
    </script>
</head>
<body>
    <div id="contact">
            <div id="head">
                    <div id="logo">
                        <img src="images/logo1.jpg" alt="" width="200px" height="80px">
                    </div>
                    <div id="headleft">
                        <div id="headleft1">
                            <form action="#">
                                <input id="textword" type="text"><input id="textsearch" type="submit" value=" ">
                            </form>
                        </div>
                    </div>
                    <div id="headright">
                        <a href="login.html" id="login">登录</a>
                        <span>|</span>
                        <a href="register.html" id="login">注册</a>
                        <span id="loginName"></span>
                        <button id="unregister" onclick="unregister()">注销</button>
                    </div>
                </div>
                <div id="bodynav">
                    <div id="nav">
                        <ul>
                            <li><a href="shouye.html">首页</a></li>
                            <li id="secondnav"><a href="#">套餐</a>
                                <div id="choose">
                                    <dl id="pep">
                                        <dd>人数</dd>
                                        <dd><a href="meetmenu2-3.html">2-3人</a></dd>
                                        <dd><a href="#">4-6人</a></dd>
                                        <dd><a href="#">7-8人</a></dd>
                                    </dl>
                                </div>
                            </li>
                            <li id="down"><a href="#">健康饮食 </a>
                                <div id="updown">
                                    <dl id="up">
                                    <dd><a href="">人体群众</a></dd>
                                    <dd><a href="laoren.html">老人</a></dd>
                                    <dd><a href="">孕妇</a></dd>
                                    <dd><a href="">青少年</a></dd>
                                    </dl>
                            </div>
                            </li>
            
                            <li><a href="fenxiangjiemian.html">分享圈</a></li>
                            <li><a href="contactus.html">联系我们</a></li>
                        </ul>
                    </div>
                </div>
                <div id="picture">
                        <div id="inner">
                            <img src="images/indexpic1.jpg" alt="">
                        </div>
                    </div>
            <div id="contactus">
                <div id="contactusword">
                    <h2>CONTACT US</h2>
                    <h3>联系我们</h3>
                </div>
                <div id="contactusword">
                        <p id="d1">如有任何问题请联系我们，我们24小时竭诚为您服务</p>
                        <p id="d2">000-000-000</p>
                    </div>
                <div id="contacttext">
                    <div id="contacttextone">
                        <img src="//14228316.s61i.faiusr.com/4/AD0I3LbkBhAEGAAgvI2NywUogLfJnwQwKDgo.png" alt="">
                        <p>关注官方微博</p>
                        <p>**********</p>
                    </div>
                    <div id="contacttexttwo">
                        <img src="//14228316.s61i.faiusr.com/4/AD0I3LbkBhAEGAAgwY2NywUomNr9uwQwKDgo.png" alt="">
                        <p>关注官方微信</p>
                        <p>**********</p>
                    </div>
                    <div id="contacttextthree">
                        <img src="//14228316.s61i.faiusr.com/4/AD0I3LbkBhAEGAAgvI2NywUogLfx0AQwKDgo.png" alt="">
                        <p>在线QQ客服</p>
                        <p>0123456</p>
                    </div>
                </div>
            </div>
            <div id="bottom">
                    <div id="bottomtext">
                        <div id="bottomleft">
                            <img src="images/logo1.png" alt=""><br>
                            <span>一年四季，一日三餐</span>
                        </div>
                        <div id="bottomright">
                            <div id="bottomrighttext">
                                <span>关于恰饭吧</span>
                                <a href="#">网站介绍</a>
                                <a href="#">加入我们</a>
                                <a href="#">联系我们</a>
                                <a href="#">商务合作</a>
                                <a href="#">用户协议</a>
                                <a href="#">隐私政策</a>
                                <a href="#">网站地图</a>
                                <a href="#">友情链接</a>
                            </div>
                        </div>
                    </div>
                </div>
    </div>
</body>
</html>